<template>
  <el-dialog custom-class="video-preview-dialog" :visible.sync="selfVisible" width="60%" top="10vh" append-to-body @close="onDialogHide">
    <video-player class="vjs-custom-skin vjs-big-play-centered" :options="playerOptions" ref="videoPlayer" @ready="onReady"></video-player>
    <div class="opt-bar">
      <i class="el-icon-refresh-right rotate-icon" title="点击旋转视频方向" @click="rotateVideo"></i>
    </div>
  </el-dialog>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import { debounce } from '@utility/utility'

export default {
  name: 'VideoPreviewDialog',
  components: {
    videoPlayer,
  },
  props: {
    visible: {
      type: Boolean,
    },
    playerOptions: {
      type: Object,
    },
  },
  data() {
    return {
      selfVisible: false,
      rotate: 0,
      resetPlayerSize: null,
    }
  },
  computed: {},
  watch: {
    visible(visible) {
      if (visible) {
        this.rotate = 0
        window.addEventListener('resize', this.resetPlayerSize)
      } else {
        window.removeEventListener('resize', this.resetPlayerSize)
      }
      this.selfVisible = visible
    },
  },
  created() {},
  mounted() {
    this.resetPlayerSize = debounce(() => {
      const pEl = this.$el.querySelector('.video-js')
      const rootH = pEl.clientHeight
      const rootW = pEl.clientWidth

      const videoEl = this.$el.querySelector('video')
      const posterEl = this.$el.querySelector('.vjs-poster')
      let h = 0
      let w = 0
      let transform = `rotate(${this.rotate}deg)`
      if (this.rotate % 180 === 0) {
        // 旋转 180
        h = rootH
        w = rootW
      } else {
        // 旋转 90
        h = rootW
        w = rootH

        if (((this.rotate / 90 + 1) / 2) % 2 === 0) {
          transform += ` translate(${(rootW - rootH) / 2}px,${(rootW - rootH) / 2}px)`
        } else {
          transform += ` translate(${(rootH - rootW) / 2}px,${(rootH - rootW) / 2}px)`
        }
      }
      videoEl.style.height = `${h}px`
      videoEl.style.width = `${w}px`
      videoEl.style.transform = transform
      posterEl.style.transform = transform
      posterEl.style.height = `${h}px`
      posterEl.style.width = `${w}px`
    }, 200)
  },
  methods: {
    onDialogHide() {
      this.$refs.videoPlayer.player.off('fullscreenchange', this.onFullScreenChange)
      this.$emit('update:visible', false)
      this.$emit('closed')
      this.$refs.videoPlayer.player.pause()
    },
    onReady() {
      this.$refs.videoPlayer.player.on('fullscreenchange', this.onFullScreenChange)
    },
    onFullScreenChange() {
      setTimeout(() => {
        this.resetPlayerSize()
      }, 400)
    },
    rotateVideo() {
      this.rotate = this.rotate + 90
      this.resetPlayerSize()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resetPlayerSize)
  },
}
</script>
<style lang="scss" scoped>
.video-preview-dialog {
  ::v-deep &.el-dialog {
    background: transparent;
    box-shadow: none;
    position: relative;

    .el-dialog__header {
      padding: 0;
      padding-top: 25px;
    }
    .el-dialog__close {
      color: #333;
      background: #fff;
      font-size: 20px;
      border-radius: 100%;
    }
    .opt-bar {
      position: absolute;
      bottom: 70px;
      right: 40px;
      .rotate-icon {
        font-size: 32px;
        background: #fff;
        border-radius: 50%;
        padding: 4px;
        cursor: pointer;
        color: #333;
        box-shadow: 0px 0px 10px 0px rgba(2, 2, 2, 0.4);
        border: 1px solid #ccc;
        &:hover {
          color: #2c63b0;
        }
      }
    }
    .video-player {
      video {
        transition: 0.25s;
      }
      .vjs-poster {
        transition: 0.25s;
      }
    }
    .vjs-button > .vjs-icon-placeholder:before {
      top: 5px;
    }
  }
}
</style>
